<!-- 底部导航栏 组件 -->

<template>
  <ul class="tab-bar">
    <!-- ?_? 当设置 to="/" 时，首页ico总是高亮，搞不懂 ?_? -->
    <router-link class="index" tag="li" to="/index">
      <i class="icon-home"></i>
      <span>书架</span>
    </router-link>

    <router-link class="find" tag="li" to="/find">
      <i class="icon-city"></i>
      <span>书城</span>
    </router-link>

    <router-link class="mine" tag="li" to="/mine">
      <i class="icon-mine"></i>
      <span>我的</span>
    </router-link>
  </ul>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  props: {},
  watch: {},
  methods: {},
  filters: {},
  computed: {},
  created() {},
  mounted() {},
  destroyed() {}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.tab-bar {
  @include onepx();
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  display: flex;
  flex-direction: row;
  background-color: #fcfcfc;
  box-shadow: 0px 1px 10px 1px #888;
  li {
    flex: 1;
    // color: #999;
    display: block;
    color: #5D666E;
    i {
      display: block;
      width: 25px;
      height: 25px;
      font-size: 25px;
      font-weight: bold;
      margin: 3px auto;
      // background: url("./tab-icons.png") no-repeat;
      background-size: 25px auto;
    }
    span {
      display: block;
      font-size: 12px;
    }
  }

  li.router-link-active {
    color: #018CFC;
  }

  .ico-index {
    background-position: 0 -75px;
  }
  .index.router-link-active .ico-index {
    background-position: 0 -50px;
  }

  .ico-order {
    background-position: 0 -25px;
  }
  .order.router-link-active .ico-order {
    background-position: 0 0;
  }

  .ico-mine {
    background-position: 0 -125px;
  }
  .mine.router-link-active .ico-mine {
    background-position: 0 -100px;
  }
}
</style>
